<!--
  - Copyright (c) 2023.
  -
  - 作者：bmy
  - 邮箱：2271608011@qq.com
  - gitee：https://gitee.com/bmycode
  - github：https://github.com/helpcode
  -
  -->

<script lang="ts">
  import { onMount } from "svelte";
  import Layout from '@/component/layout.svelte';
  import { RadioGroup } from '@svelteuidev/core';
  import ChangeTheme from '@/utils/ChangeTheme';
  import { themeConfig } from '@/stores/ThemeStore';
  import config from "@/config";
  import JsonDatabase from "@/utils/JsonDatabase";
  import AutoStart from "@/utils/AutoStart";
  import * as monaco from 'monaco-editor';

  let AutoLoginStartSelect = String($themeConfig.autoLoginStart);
  let LineNumbersSelect = String($themeConfig.lineNumbers);
  let MinimapSelect = String($themeConfig.minimap);
  let AutoClipboardSelect = String($themeConfig.autoClipboard);

  let ThemeSelect = $themeConfig.theme;
  const ThemeList = [
    { label: '白天模式', value: "light", src: "/img/light.png" },
    { label: '夜间模式', value: "dark", src: "/img/dark.png" },
    { label: '跟随系统', value: "auto", src: "/img/auto.png" }
  ];

  const SelectChangeTheme = async (index: number) => {
    let ClickValue = ThemeList[index].value
    if (ClickValue !== "auto") {
      $themeConfig.theme = ClickValue
      $themeConfig.autoThemeSystem = 0
    } else {
      $themeConfig.theme = await config.appWindow.theme()
      $themeConfig.autoThemeSystem = 1
    }
    await ChangeTheme.setThemeRunCode($themeConfig)
  }

  const updateEdit = () => {
    config.Json.updateOptions({
      lineNumbers: $themeConfig.lineNumbers,
      minimap: {
        enabled: Boolean($themeConfig.minimap)
      }
    })

    config.ClassOrInterface.updateOptions({
      lineNumbers: $themeConfig.lineNumbers,
      minimap: {
        enabled: Boolean($themeConfig.minimap)
      }
    })
  }

  onMount(async () => {

  });

</script>

<div class="other">
    <Layout text="其他设置">

        <div class="theme">
            <div class="title_theme">主题设置:</div>
            <ul class="select_theme">
                {#each ThemeList as {label, value, src}, i}
                    <li>
                        <img
                                on:click={() => SelectChangeTheme(i)}
                                src={src}
                                alt={label}>
                        <p>{label}</p>
                    </li>
                {/each}
            </ul>
        </div>

        <RadioGroup
                label="行号: "
                description="开启后 编辑区域 将显示代码 行号"
                direction="column"
                labelDirection="left"
                items={config.offOrOnList(2)}
                bind:value={LineNumbersSelect}
                on:change={() => {
                  monaco.editor
                   $themeConfig.lineNumbers = LineNumbersSelect
                   JsonDatabase.writeJson($themeConfig)
                   updateEdit()
                }}/>

        <RadioGroup
                label="小地图: "
                description="开启后 编辑区域 将显示代码 小地图"
                direction="column"
                labelDirection="left"
                items={config.offOrOnList()}
                bind:value={MinimapSelect}
                on:change={() => {
                   $themeConfig.minimap = Number(MinimapSelect)
                   JsonDatabase.writeJson($themeConfig)
                   updateEdit()
                }}/>

        <RadioGroup
                label="剪贴板: "
                description="开启后，转换后的代码将自动复制到剪贴板"
                direction="column"
                labelDirection="left"
                items={config.offOrOnList()}
                bind:value={AutoClipboardSelect}
                on:change={() => {
                   $themeConfig.autoClipboard = Number(AutoClipboardSelect)
                   JsonDatabase.writeJson($themeConfig)
                   updateEdit()
                }}/>


        <RadioGroup
                label="开机自启: "
                description="开启后 软件 将随着操作系统开机而自启"
                direction="column"
                labelDirection="left"
                items={config.offOrOnList()}
                bind:value={AutoLoginStartSelect}
                on:change={() => {
                  let isStart = Number(AutoLoginStartSelect)
                  isStart ? AutoStart.EnableAutoStart() : AutoStart.DisableAutoStart()
                  $themeConfig.autoLoginStart = isStart
                  JsonDatabase.writeJson($themeConfig)
                }}/>
    </Layout>
</div>

<style lang="less">
  @import "../assets/less/_.less";

  .other {
    .theme {
      .title_theme {
        font-size: 14px;
        font-weight: 500;
        color: @color;
        margin-bottom: 15px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
      }

      .select_theme {
        display: flex;
        margin-bottom: 25px;

        li {
          width: 120px;
          margin-right: 20px;
          text-align: center;

          img {
            width: 100%;
            border-radius: 10px;
            border: 1px solid @background;
            box-sizing: border-box;
            margin-bottom: 10px;
            cursor: pointer;
          }

          p {
            font-size: 13px;
            color: @color;
          }
        }
      }
    }
  }
</style>